<template>
	<el-cascader
		v-model="value"
		:options="region"
		@change="onChange"
		:props="{
			label: 'name',
			value: 'id',
			emitPath: false,
		}"
		:placeholder="placeholder"
		clearable
		collapse-tags
		filterable
		:filter-method="filterMethod"
	/>
</template>

<script setup>
import { ref, computed } from "vue"
import { findPinYin } from "/plugins/pinyin"
import { useDictStore } from "/store/dict"

const props = defineProps({
	modelValue: {
		type: [String, Number],
		default: "",
	},
	placeholder: {
		type: String,
		default: "请选择...",
	},
	disabled: {
		type: Boolean,
		default: false,
	},
})

const emits = defineEmits(["update:modelValue", "change"])

const region = ref([])

async function getRegion() {
	if (region.value.length) return
	region.value = await useDictStore().getDict("/system/sysRegion/tree")
}
getRegion()

const value = computed({
	get() {
		return props.modelValue || ""
	},
	set(value) {
		emits("update:modelValue", value)
	},
})

function filterMethod(node, query) {
	return findPinYin(node.pathLabels.join(""), query)
}

function onChange(value) {
	emits("change", value)
}
</script>

<style lang="scss" scoped></style>
